---
image: /generated/articles-docs-audio-trimming.png
title: Trimming Audio
sidebar_label: Trimming Audio
id: trimming
crumb: 'Audio'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

The [`<Html5Audio />`](/docs/html5-audio) tag supports the [`trimBefore`](/docs/html5-audio#trimbefore--trimafter) and [`trimAfter`](/docs/html5-audio#trimbefore--trimafter) props.  
With it, you can trim off parts of the audio.

```tsx twoslash {8} title="MyComp.tsx"
import {AbsoluteFill, Html5Audio, staticFile, useVideoConfig} from 'remotion';

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} trimBefore={2 * fps} trimAfter={4 * fps} />
    </AbsoluteFill>
  );
};
```

This will result the audio to play the range from `00:02:00` to `00:04:00`, meaning the audio will play for 2 seconds.

The audio will still play immediately at the beginning - to see how to shift the audio to appear later in the composition, see the [next article](/docs/audio/delaying).

:::note Legacy props
You can also use the deprecated `startFrom` and `endAt` props, but the new `trimBefore` and `trimAfter` props are preferred.
:::
